<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-size: cover; /*拉伸背景图片*/
        }
        button{
            background-color: cornflowerblue;
            color: azure;
            margin-top: 10px;
            position: relative;left: 100px; /*位置*/
            cursor: pointer;
        }
        input{
            margin-top: 10px;  /*标签之间的距离*/
            opacity: 0.5; /*透明度*/
            color: azure;
            background-color: #666;

        }
        input:focus{
            background-color: azure;
        }
        input::-webkit-input-placeholder{
            color: azure;
        }

    </style>
</head>
<body background="../static/1.png">  <!--实现页面背景-->
    <form>
        <div  align="center" style="position: relative;top: 130px;" > <!--div居中显示 相对定位定到一个比较合理的位置-->
            <img src="../static/2.jpg"/><!--//放图片-->
        </div>
        <span style="position: relative;top: 170px;left: 480px">
            <input onclick="" type="text" name="username" style="width: 280px;height: 30px" placeholder="用户名" ><!--//用户名输入框--><br>
            <input type="password" name="password" style="width: 280px;height: 30px" placeholder="密码"><!--//密码输入框--><br>
            <button name="denglu" style="width: 90px;height: 40px;  ">登录</button>
        </span>

    </form>

</body>
</html>